import { onMounted, onUnmounted, readonly, ref } from "vue";
//@ts-ignore
//@ts-ignore
import { debounce } from "./debounce";

export function useinnerwidth(): {
    readonly value: number;
} {
    const width = ref(window.innerWidth);
    const listener = debounce(() => {
        requestAnimationFrame(() => {
            width.value = window.innerWidth;
        });
    });
    onMounted(() => {
        window.addEventListener("resize", listener);
    });
    onUnmounted(() => {
        window.removeEventListener("resize", listener);
        listener.cancel();
    });

    return readonly(width);
}
